<script setup lang="ts">
import { Apple, Download }  from "@element-plus/icons-vue"
import downloadImg from '@/assets/qqimgs/down.svg'
import {computed, ref, onUpdated, onMounted} from "vue";
import { useAudioPlayerStore } from '@/stores'
import LikeButton from "@/components/Controls/LikeButton.vue";
import DownloadButton from "@/components/Controls/DownloadButton.vue";
const audioStore = useAudioPlayerStore()


const scrollTextRef = ref<HTMLElement | null>(null)
const scrollContainerRef = ref<HTMLElement | null>(null)


const scrollLength = ref<string>('0px')

const handleScrollLength = () => {
  if(scrollTextRef.value && scrollContainerRef.value && scrollTextRef.value.offsetWidth && scrollContainerRef.value.offsetWidth)
  {
    if(scrollContainerRef.value.offsetWidth < scrollTextRef.value.offsetWidth)
    {
      scrollLength.value = (scrollContainerRef.value.offsetWidth - scrollTextRef.value.offsetWidth -2) + "px"
    }
    else
    {
      scrollLength.value = '0px'
    }

  }
  else
  {
    scrollLength.value = '0px'
  }
}

onUpdated(()=>{
  handleScrollLength()
})


onMounted(()=>{
  handleScrollLength()
})

</script>

<template>
<div class="footer-info">
  <div class="music-name" ref="scrollContainerRef">
    <div class="name-text scroll-text" ref="scrollTextRef" v-if="audioStore.playingSong !== null"><span class="title">{{audioStore.playingSong ? audioStore.playingSong.title : ''}}</span><span class="artist_name"> - {{audioStore.playingSong?audioStore.playingSong.artist_name:''}}</span></div>
    <div class="name-text scroll-text" ref="scrollTextRef" v-else><span class="title">QQ音乐，音乐你的生活！</span></div>
  </div>
  <div class="footer-info-btn">
    <LikeButton :liked="audioStore.playingSong ? audioStore.playingSong.liked : false" :songId="audioStore.playingSong ? audioStore.playingSong.id : '0'"></LikeButton>
    <DownloadButton :songId="audioStore.playingSong ? audioStore.playingSong.id : '0'"></DownloadButton>
  </div>
</div>
</template>

<style lang="scss" scoped>
.footer-info{
  display:flex;
  flex-direction: column;
  margin-left: 10px;
  font-size: 12px;
  justify-content: space-between;
}

.footer-info-btn {
  display: flex;
  align-items: center;
  div{
    margin-right: 16px;
    font-size: 16px;
  }
}

.music-name{
  width: 200px;
  overflow: hidden;
  position: relative;
  height: 20px;

}

.name-text{
  white-space: nowrap; /* 不换行 */
  display: inline-block;
  position: absolute;
  top: 0;
  //text-shadow: grey 1px 1px 2px;
  //color: black;
}

.scroll-text{
  animation: scrolling-animation 3s linear infinite alternate; /* 动画设置 */
  animation-delay: 1s;
  //animation-direction: alternate; /* 反向播放 */
  //animation-fill-mode: both; /* 反向播放前延时 */
}

.artist_name{
  color: #aeaeae;
}

@keyframes scrolling-animation {
  0% {
    transform: translateX(0); /* 初始位置 */
  }
  33% {
    transform: translateX(0); /* 初始位置 */
  }
  66% {
    transform: translateX(v-bind(scrollLength)); /* 滚动结束位置 */
  }
  100% {
    transform: translateX(v-bind(scrollLength)); /* 滚动结束位置 */
  }
}

@keyframes scrolling-animation2 {
  0% {
    transform: translateX(0); /* 初始位置 */
  }
  33% {
    transform: translateX(0); /* 初始位置 */
  }
  66% {
    transform: translateX(v-bind(scrollLength)); /* 滚动结束位置 */
  }
  100% {
    transform: translateX(v-bind(scrollLength)); /* 滚动结束位置 */
  }
}

</style>